import { Modal, Form, Input } from 'antd';
import * as React from 'react';

class EnvironmentAddModalForm extends React.Component {

  constructor(props) {
    super(props);
    this.state = {
      createState: {}
    };
  }

  render() {
    const nameProps = this.props.form.getFieldProps('name', {
      rules: [
        { required: true, message: '请填写注册中心名称' }
      ]
    });
    const registryProps = this.props.form.getFieldProps('registry', {
      rules: [
        { required: true, message: '请填写注册中心地址' }
      ]
    });
    const usernameProps = this.props.form.getFieldProps('username', {});
    const passwordProps = this.props.form.getFieldProps('password', {});
    return (
      <Form horizontal form={this.props.form}>
        <Form.Item labelCol={{ span: 6 }} wrapperCol={{ span: 18 }} label="环境名称：">
          <Input {...nameProps} required placeholder="输入环境名称"/>
        </Form.Item>
        <Form.Item labelCol={{ span: 6 }} wrapperCol={{ span: 18 }} label="注册中心地址：">
          <Input {...registryProps} placeholder="输入注册中心地址" addonBefore="zookeeper://"/>
        </Form.Item>
        <Form.Item labelCol={{ span: 6 }} wrapperCol={{ span: 18 }} label="用户名：" help="无限制则不填写">
          <Input {...usernameProps} placeholder="输入注册中心用户名"/>
        </Form.Item>
        <Form.Item labelCol={{ span: 6 }} wrapperCol={{ span: 18 }} label="密码：" help="无限制则不填写">
          <Input {...passwordProps} placeholder="输入注册中心密码"/>
        </Form.Item>
      </Form>
    )
  }
}

EnvironmentAddModalForm = Form.create({})(EnvironmentAddModalForm);

class EnvironmentAddModal extends React.Component {
  constructor(props) {
    super(props);
    this.state = { visible: false }
  }

  showModal(environment = {}) {
    this.setState({
      visible: true,
      environment: environment
    });
    const form = this.refs.form

    if (environment.registry) {
      environment.registry = environment.registry.split("://")[1]
    }
    const values = {
      name: environment.name,
      registry: environment.registry,
      username: environment.username,
      password: environment.password
    }

    if (form)
      form.setFieldsValue(values)
  }

  handleOk() {
    const {form} = this.refs;
    const {environment = {}} = this.state
    const me = this;
    form.validateFieldsAndScroll((errors, values) => {
      if (!!errors) {
        return;
      }
      for (var i in values) {
        environment[i] = values[i]
      }
      environment.registry = "zookeeper://" + environment.registry

      me.setState({
        confirmLoading: true
      });

      me.props.onSave(environment)
        .then(()=> {
          this.hideModel()
        });
    })
  }

  hideModel() {
    this.setState({
      visible: false,
      confirmLoading: false
    });
  }

  handleCancel() {
    this.setState({
      visible: false
    });
  }

  render() {
    return (
      <Modal title="新增环境"
        visible={this.state.visible}
        onOk={::this.handleOk}
        confirmLoading={this.state.confirmLoading}
        onCancel={::this.handleCancel}>
        <EnvironmentAddModalForm ref="form" environment={this.state.environment}/>
      </Modal>
    );
  }
}

export default EnvironmentAddModal;
